<style lang="sass">
.group
  background-color: #eeecec
  display: flex
  flex-direction: column
  height: 100vh

.top
  padding: 20px
  height: 300px
  display: flex

.bottom
  flex: 1
  overflow-y: scroll

.imgInfo
  display: flex
  flex: 1
  flex-direction: column
  justify-content: space-between

  .title
    font-weight: bold
    margin-bottom: 12px

.download
  display: inline-flex
  align-items: center
  justify-content: center
  border-radius: 10px
  background-color: #e7e764
  font-size: 32px
  height: 80px
  width: 320px

  .leftImg
    width: 50px
    height: 50px
    margin-right: 10px

.author
  display: flex
  align-items: center
  font-size: 30px
  justify-content: flex-end

  .avatar
    width: 80px
    height: 80px
    border-radius: 50%
    margin-right: 20px

  .nickName
    color: #e7e7e7
    font-size: 32px

  .link
    font-size: 24px
    color: #5b5a5a

.chooseImgBox
  width: 300px
  height: 300px
  border-radius: 20px
  overflow: hidden
  margin-right: 20px
  border: 1px solid #99714b

.chooseImg
  width: 100%
  height: 100%

.imgBox
  background-color: #fff
  display: grid
  grid-template-columns: repeat(4, 1fr)
  justify-content: space-around
  gap: 20px
  padding: 20px
  overflow-y: scroll

.imgBox
  border-radius: 30px 30px 0 0

.imgItem
  aspect-ratio: 1
  border: 3px solid #fff
  overflow: hidden

  &.active
    border: 3px solid #99714b
    border-radius: 20px

  .img
    width: 100%
    height: 100%
</style>
<template>
  <view class="group">
    <view class="top">
      <view class="chooseImgBox">
        <Image @tap="goImgDetail(data.imgDetail[index].id)" class="chooseImg" v-if="data.imgDetail" mode="aspectFit" :src="data.imgDetail[index].hdPath"/>
      </view>
      <view class="imgInfo">
        <view class="title">
          {{ data.title }}
        </view>
        <view class="download" v-if="platForm == 'weapp'" @tap="weappDownload">
          <Image class="leftImg" :src="leftImg"/>
          下载原图
        </view>

        <view class="download" v-if="platForm == 'tt'" @tap="ttDownload">
          <Image class="leftImg" :src="leftImg"/>
          <view v-if="adLock">
            看广告下载原图
          </view>
          <view v-else>
            下载原图
          </view>
        </view>

        <view class="author" v-if="data.authorDetail" @tap="goAuthor(data.authorId)">
          <Image class="avatar" :src="data.authorDetail.avatar"/>
          <view>
            <view class="nickname">{{ data.authorDetail.nickName }}</view>
            <view class="link">TA的相关表情</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="imgBox">
        <view class="imgItem" :class="{ active: index == i }" v-for="(item, i) in data.imgDetail" :key="item.id"
              @tap="index = i">
          <Image class="img" :src="`${item.hdPath}?x-oss-process=style/thumb`"/>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Taro, {useLoad} from "@tarojs/taro";
import {reactive, ref} from "vue";
import {View, Image} from '@tarojs/components'
import {get} from "../../../util/request";
import leftImg from '../../../assets/icon/left.png'

const index = ref(0)
const data = reactive({})
const id = Taro.getCurrentInstance().router.params.id

const platForm = process.env.TARO_ENV;
const adLock = ref(true);
const getDetail = async () => {
  const result = await get('group/detail', {
    id: id
  })
  Object.assign(data, result)
}
Taro.showShareMenu({
  withShareTicket: true
})
const downloading = ref(false)

function goAuthor(id) {
  Taro.navigateTo({
    url: `/pages/author/detail/index?id=${id}`
  })
}
function goImgDetail(id) {
  Taro.navigateTo({
    url: `/pages/img/index?id=${id}`
  })
}

const videoAd = ref(null)
useLoad(() => {
  if (process.env.TARO_ENV === 'tt') {
    adLock.value = true
    videoAd.value = Taro.createRewardedVideoAd({
      adUnitId: 'c9tw9z1qq5cjvjka36'
    })
    videoAd.value.onError((err) => {
      videoAd.value.load()
      videoAd.value.show()
    });
    videoAd.value.onClose(closeHandle)
    videoAd.value.load()
  }
})

const closeHandle = ({isEnded}) => {
  if (isEnded) {
    adLock.value = false
    downloadFile()
  }
}
const ttDownload = async () => {
  if (adLock.value) {
    Taro.showLoading({
      title: "加载中...",
      mask: true
    })
    videoAd.value.show().then(() => {
      Taro.hideLoading()
    }).catch((err) => {
      Taro.hideLoading()
    });
  } else {
    downloadFile()
  }
}

const weappDownload = async () => {
  downloadFile()
}

const openConfirm = async () => {
  Taro.showModal({
    content: '检测到您没有打开小程序相册权限，是否取设置打开？',
    showCancel: true,
    success: res => {
      if (res.confirm) {
        Taro.openSetting({
          success: () => {
            downloadFile()
          }
        })
      }
    }
  })
}

const downloadFile = async () => {
  if (downloading.value) return
  downloading.value = true
  Taro.showToast({
    title: "下载中",
    icon: "loading"
  })
  Taro.downloadFile({
    url: encodeURI(data.imgDetail[index.value].hdPath),
    success: (res) => {
      Taro.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: (data) => {
          Taro.showModal({
            content: "成功保存至手机相册",
            showCancel: false,
          });
          Taro.hideToast()
          downloading.value = false
        },
        fail: (res) => {
          Taro.showModal({
            content: "保存失败,打开相册权限",
            showCancel: false,
          });
          Taro.hideToast()
          downloading.value = false
        },

      })
    }
  })
}
getDetail()

</script>
